<template>
    <transition name="blogfade">
        <div class="single-blog-bc" v-if="blogVisible">
            <!-- bar -->
            <div class="bar-warp multiport-hide comment-hide">
                <div class="bar-inner">
                    <leftBar></leftBar>
                </div>
            </div>
            <!-- content -->
            <div class="content-warp">
                <!-- 引入ui面包屑 -->
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }"
                        >首页</el-breadcrumb-item
                    >
                    <el-breadcrumb-item :to="{ path: '/' }">{{
                        categoryName
                    }}</el-breadcrumb-item>
                    <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
                </el-breadcrumb>
                <!-- 引入顶部头像信息 -->
                <topinfo :msg="title"></topinfo>

                <!-- 文章主体部分 -->

                <div class="article-main">
                    <v-md-editor
                        :value="content"
                        @copy-code-success="handleCopyCodeSuccess"
                        mode="preview"
                    ></v-md-editor>
                </div>

                <!-- 文章结束标识 -->
                <div class="over-content" @click="changeTimeStatus">
                    <div class="content-time" v-show="timeChange">
                        发布于 {{ blog.createDate }}
                    </div>

                    <!-- 文章编辑时间显示 -->
                    <div class="edit-time" v-show="!timeChange">
                        编辑于 {{ blog.modifiedDate }}
                    </div>
                </div>

                <!--赞赏部分  -->

                <div class="reward" ref="timeRef">
                    <div class="reward-inner">
                        <span class="img-warp">
                            <img
                                src="https://image.huos77.cn/img/reward-btn-.svg"
                                alt=""
                            />
                        </span>

                        <span>Buy me a coffee</span>
                    </div>
                </div>
                <!-- 文章标签部分 -->
                <div class="article-tag">
                    <div
                        class="tag1"
                        v-for="(item, index) in tags"
                        :key="index"
                    >
                        <button class="button button-tag">
                            {{ item.tagName }}
                        </button>
                    </div>
                </div>

                <!-- 评论部分 -->
                <div class="comment-warp" ref="commentRef">
                    <!-- 评论表单 -->
                    <div class="comment-form">
                        <div class="header">
                            <span class="header-title">评论</span>
                        </div>
                        <div class="content">
                            <div class="avator-box">
                                <img
                                    src="https://portrait.gitee.com/uploads/avatars/user/2583/7749008_echoc_1642921864.png!avatar200"
                                    alt=""
                                />
                            </div>
                            <div class="form-box">
                                <input
                                    type="text"
                                    placeholder="提问和评论都可以，用心的回复会被更多人看到"
                                />
                                <button>评论</button>
                            </div>
                        </div>
                    </div>

                    <!-- 一级评论 -->
                    <div class="one-comment-warp" v-if="comments.length">
                        <div class="header">
                            <span class="header-title">全部评论</span>
                        </div>
                        <div class="comment-container">
                            <div
                                class="comment"
                                v-for="item in comments"
                                :key="item.id"
                            >
                                <div class="author-info">
                                    <span class="avator">
                                        <img :src="item.author.avatar" alt="" />
                                    </span>
                                    <span class="nameTime">
                                        <span class="name">{{
                                            item.author.nickname
                                        }}</span>
                                        <div class="time">
                                            {{ item.createDate }}
                                        </div>
                                    </span>
                                </div>
                                <div class="comment-body">
                                    <span>{{ item.content }}</span>
                                    <button class="reply-btn">回复</button>
                                </div>
                                <!-- 二级评论 -->
                                <div
                                    class="comment-reply"
                                    v-if="item.reply.length > 0"
                                >
                                    <div
                                        class="sub-comment"
                                        style="border: none"
                                        v-for="reply in item.reply"
                                        :key="reply.id"
                                    >
                                        <div class="author-info">
                                            <span class="avator">
                                                <img
                                                    :src="reply.author.avatar"
                                                    alt=""
                                                />
                                            </span>
                                            <span class="nameTime">
                                                <span class="name"
                                                    >{{ reply.author.nickname }}
                                                </span>
                                                <div class="time">
                                                    {{ reply.createDate }}
                                                </div>
                                            </span>
                                        </div>
                                        <!-- 三级评论 -->
                                        <div class="comment-body">
                                            <span>{{ reply.content }}</span>
                                            <button class="reply-btn">
                                                回复
                                            </button>
                                        </div>
                                        <div>
                                            <div
                                                class="sub-comment"
                                                style="border: none"
                                                v-for="replyThere in reply.reply"
                                                :key="replyThere.id"
                                            >
                                                <div class="author-info">
                                                    <span class="avator">
                                                        <img
                                                            :src="
                                                                replyThere
                                                                    .author
                                                                    .avatar
                                                            "
                                                            alt=""
                                                        />
                                                    </span>
                                                    <span class="nameTime">
                                                        <span class="name"
                                                            >{{
                                                                replyThere
                                                                    .author
                                                                    .nickname
                                                            }}
                                                            <span
                                                                class="reply-desc"
                                                            >
                                                                <span
                                                                    style="
                                                                        color: #8a919f;
                                                                        padding: 12px;
                                                                    "
                                                                    >回复</span
                                                                >
                                                                <span>{{
                                                                    replyThere
                                                                        .toUser
                                                                        .nickname
                                                                }}</span>
                                                            </span>
                                                        </span>
                                                        <div class="time">
                                                            {{
                                                                replyThere.createDate
                                                                    | timehandle
                                                            }}
                                                        </div>
                                                    </span>
                                                </div>
                                                <div class="comment-body">
                                                    <span>{{
                                                        replyThere.content
                                                    }}</span>
                                                    <button class="reply-btn">
                                                        回复
                                                    </button>
                                                </div>
                                                <div
                                                    class="comment-reply"
                                                ></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="comment-null">
                        暂时没有评论噢~ 赶紧发表你的意见吧
                    </div>
                </div>
            </div>
            <!-- toc -->
            <div class="toc-warp multiport-hide">
                <transition name="fade-toc">
                    <div
                        ref="tocRef"
                        class="toc-inner"
                        :style="tocStyle"
                        v-if="tocVisible & toc"
                    >
                        <rigthToc
                            tocType="full"
                            :navlist="navlist"
                            v-show="navlist.length != 0"
                            @getHeight="getHeight"
                            :tocScrollTop="pcTocHeight"
                        ></rigthToc>
                    </div>
                </transition>
            </div>

            <Popup v-show="MenuPopupVisible && toc">
                <template slot="body">
                    <rigthToc
                        @closeToc="closeToc"
                        :navlist="navlist"
                        v-show="navlist.length != 0"
                    ></rigthToc>
                </template>
            </Popup>
            <div
                class="menu-button"
                ref="menuBtnRef"
                :class="{ 'menu-button-fixed': tocFixed }"
                v-show="!MenuPopupVisible"
                @click="showMenuPopup"
            ></div>
        </div>
    </transition>
</template>

<script>
import topinfo from '@/components/TopInfo.vue'
import rigthToc from '@/components/toc.vue'
import leftBar from '@/components/blogBar.vue'
import { getArticle, getComment } from '@/api'
import Popup from '@/base/popup/popup.vue'

const SHORT_TITLE = 'h2'
const LONG_TITLE = 'h2,h3'

export default {
    components: { topinfo, rigthToc, leftBar, Popup },
    props: ['id'],
    inject: ['tocTop'],
    data() {
        return {
            msg: '',
            navlist: [],
            blog: {},
            html: '',
            tags: [],
            comments: [],
            categoryName: '',
            criticalValue: 0,
            tocVisible: true,
            tocStyleFlag: false,
            blogVisible: false,
            title: '',
            MenuPopupVisible: false,
            tocFixed: false,
            content: '',
            scale: 0,
            timeChange: false,
            tocHeight: 0,
            pcTocHeight: 20,
        }
    },
    computed: {
        name() {
            return this.$route.path
        },
        toc() {
            return this.$store.getters.toc
        },
        tocStyle() {
            if (this.tocStyleFlag && this.tocTop() != undefined) {
                return 'position: fixed;top:' + this.tocTop()
            }
            return 'position: relative;'
        },
    },
    methods: {
        // toc的高度
        getHeight(tocHeight) {
            console.log(tocHeight, 'tocHeight')
            this.tocHeight = tocHeight
            console.log(tocHeight, 'this.tocHeight')
        },
        // 更改时间显示
        changeTimeStatus() {
            this.timeChange = !this.timeChange
        },
        handleCopyCodeSuccess(code) {
            window.navigator.clipboard
                .writeText(code)
                .then(() => {
                    this.$message.success({
                        message: '复制代码成功',
                        duration: 3000,
                    })
                })
                .catch((err) => {
                    this.$message.error({
                        message: err,
                        duration: 3000,
                    })
                })
        },
        closeToc() {
            this.MenuPopupVisible = false
        },
        showMenuPopup() {
            this.MenuPopupVisible = true
            this.$store.commit('app/OPEN_TOC')
        },
        selectAllTitle() {
            let title = document
                .querySelector('.article-main')
                .querySelectorAll(LONG_TITLE)
            if (title.length > 12) {
                title = document
                    .querySelector('.article-main')
                    .querySelectorAll(SHORT_TITLE)
            }
            this.navlist = Array.from(title)
            this.navlist.forEach((item) => {
                item.name = item.innerText
                let index = item.localName.indexOf('h')
                item.lev =
                    'lev-' +
                    item.localName.substring(index + 1, item.localName.length)
            })
        },
        async getComments() {
            const { data: r } = await getComment(this.id)
            this.comments = r
        },
        controlToc() {
            let currentTop =
                window.pageYOffset ||
                document.documentElement.scrollTop ||
                document.body.scrollTop

            this.pcTocHeight = currentTop * this.scale
            // 手机端的toc固定 / 相对控制
            if (currentTop > 140) {
                this.tocFixed = true
            } else {
                this.tocFixed = false
            }
            // pc端的toc固定 / 相对控制
            if (Math.ceil(currentTop) > 240) {
                this.tocStyleFlag = true
            } else {
                this.tocStyleFlag = false
            }
            // pc端的toc是否显示控制
            if (Math.ceil(currentTop) >= Math.floor(this.criticalValue)) {
                this.tocVisible = false
            } else {
                this.tocVisible = true
            }
        },
        async getData() {
            await getArticle(this.id)
                .then(({ data: r }) => {
                    this.blog = r
                    this.categoryName = r.category.categoryName
                    this.title = r.title
                    document.title = r.title
                    this.html = r.body.contentHtml
                    this.content = r.body.content
                    this.tags = r.tags
                    this.blogVisible = true
                })
                .then(() => {
                    this.selectAllTitle()
                    this.getComments()
                })
            // 使用await之后就是一个异步操作，所以后面的不用再加上nextTicK的api
            this.criticalValue = this.$refs.timeRef.offsetTop
            setTimeout(() => {
                this.scale = this.tocHeight / this.criticalValue
            }, 1000)
            this.$emit('updateHandle')
        },
    },
    mounted() {
        window.addEventListener('scroll', this.controlToc)
    },
    activated() {
        this.blogVisible = false
        this.getData()
    },
}
</script>
<style lang="less" scoped>
.single-blog-bc {
    position: relative;
    padding-top: 20px;
    margin: -2px;
    display: flex;
    justify-content: space-between;
    padding: 20px;
    &.blogfade-enter-active {
        animation: blogfade 0.6s;
    }
    .bar-warp {
        flex: 1;
        display: flex;
        margin-right: 30px;
        margin-top: 60px;
        position: relative;
        justify-content: flex-end;
        .bar-inner {
            position: fixed;
        }
    }
    .content-warp {
        flex: 4;
        width: 100%;
        .over-content {
            padding: 16px 0;
            .content-time {
                color: #8590a6;
                font-size: 14px;
            }
            .edit-time {
                color: #8590a6;
                font-size: 14px;
            }
        }

        .reward {
            height: 44px;
            text-align: center;
            color: gray;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 20px 0;

            .reward-inner {
                display: flex;
                padding: 10px;
                align-items: center;
                border-radius: 10px;
                background-color: #58a4d0;
                color: #fff;
                user-select: none;
                cursor: pointer;
                .img-warp {
                    height: 27px;
                    width: 27px;
                    margin-right: 4px;
                }
            }

            .reward-btn {
                width: 80px;
                height: 34px;
                border-radius: 4px;
                margin-top: 27px;
                background-color: #ff3366;
                cursor: pointer;
                outline: none;
                border: none;
                color: #fff;
            }
        }
    }
    .toc-warp {
        flex: 1;
        position: relative;
        min-width: 270px;
        margin-left: 100px;
        padding-left: 10px;
        .toc-inner {
            position: relative;
            // top: 90px;
            display: inline-block;
            width: 0;
            transition: top 0.2s;
        }
    }
}

.article-time {
    margin-left: 250px;
    color: #4f4f4f;
    font-size: 14px;
}
.article-main {
    margin-top: 20px;
    margin-bottom: 10px;
}
.article-tag {
    display: flex;
    padding: 18px 0;
}
.tag1 {
    margin-right: 10px;
}
.button-tag {
    width: 90px;
    padding: 10px 0px;
    border-radius: 999px;
    background-color: #e5efff;
    border: none;
    color: #06f;
}

.one-comment-warp {
    height: 800px;
    .header {
        padding: 20px 0;
        .header-title {
            font-weight: 600;
            font-size: 18px;
        }
    }
    .comment-container {
        .comment {
            position: relative;
            padding: 16px 0;
            margin: 10px 0;
            .author-info {
                display: flex;
                .avator {
                    vertical-align: top;
                    display: inline-block;
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    overflow: hidden;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .nameTime {
                    margin-left: 10px;
                    .time {
                        color: gray;
                        font-size: 12px;
                    }
                }
            }
            .comment-body {
                margin-top: 4px;
                margin-left: 50px;
                .reply-btn {
                    float: right;
                    padding: 2px;
                    background-color: #999999;
                    border: none;
                    outline: none;
                    font-size: 10px;
                    border-radius: 2px;
                    cursor: pointer;
                    color: #e8e8e8;
                }
            }
            .comment-reply {
                background-color: #f9fafb;
                overflow: hidden;
                margin: 0 50px;
                border-radius: 4px;
                padding: 0 10px;
                margin-top: 10px;
                .sub-comment {
                    position: relative;
                    margin-top: 20px;
                }
                .sub-comment:last-child {
                    margin-bottom: 20px;
                }
            }
        }
        .comment:first-child {
            margin-top: 0;
            padding-top: 0;
        }
        .comment:not(:last-child)::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            display: block;
            margin: 0 50px;
            border-bottom: 1px solid #ebebeb;
        }
    }
}

.comment-null {
    margin-top: 40px;
    text-align: center;
    color: #aaa;
}

.time {
    margin-top: 2px;
}

.comment-form {
    .header {
        padding: 20px 0;
        .header-title {
            font-weight: 600;
            font-size: 18px;
        }
    }
    .content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .avator-box {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            overflow: hidden;
        }
        .form-box {
            display: flex;
            flex: 1;
            margin-left: 10px;
            input {
                flex: 1;
                height: 36px;
                outline: none;
                padding: 6px 8px;
                border: 1px solid #dadde0;
                border-radius: 4px;
                background: rgba(248, 249, 251, 0.8);
                vertical-align: middle;
            }
            button {
                width: 80px;
                height: 36px;
                background-color: #ccccd7;
                border-radius: 4px;
                font-size: 14px;
                text-align: center;
                margin-left: 8px;
                outline: none;
                cursor: pointer;
                border: none;
                line-height: 36px;
                vertical-align: middle;
            }
        }
    }
}

.fade-toc-enter-active {
    animation: fadeToc 0.6s;
}
.fade-toc-leave-active {
    animation: fadeTocLeave 0.6s;
}
.bar-space {
    width: 100%;
    height: 20px;
}
.menu-button {
    z-index: 1000;
    margin: 1em;
    padding: 0;
    width: 100px;
    height: 35px;
    text-indent: 2.5em;
    position: absolute;
    outline: 0;
    cursor: pointer;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 3px;
    font-size: 12px;
    text-transform: uppercase;
    line-height: 35px;
    padding-right: 13px;
    text-align: center;
    background: #222;
    right: -20px;
    width: 35px !important;
    transition: all 1s;
}
.menu-button-fixed {
    position: fixed;
    top: 80px;
}
.menu-button:hover {
    background-color: #7a7a7a;
}
.menu-button::before {
    position: absolute;
    top: 12px;
    left: 0.5em;
    bottom: 0.5em;
    right: 13px;
    width: 11px;
    height: 9px;
    content: '';
    background: linear-gradient(
        #fff 20%,
        transparent 20%,
        transparent 40%,
        #fff 40%,
        #fff 60%,
        transparent 60%,
        transparent 80%,
        #fff 80%
    );
}

@keyframes fadeToc {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeTocLeave {
    0% {
        opacity: 1;
    }
    100% {
        transform: translateY(-20px);
        opacity: 0;
    }
}

@keyframes Toc {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes blogfade {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@media (max-width: 420px) {
    .comment-form .content .form-box button {
        width: 50px !important;
    }
}
@media (min-width: 980px) and (max-width: 1280px) {
    .single-blog-bc {
        justify-content: center;
    }
    .toc-warp {
        min-width: 60px;
        .toc-inner {
            display: none;
        }
    }
}
@media screen and (max-width: 1300px) {
    .single-blog-bc .toc-warp {
        margin-left: 20px;
    }
}
@media screen and (min-width: 980px) {
    .menu-button {
        display: none;
    }
}
</style>
